Internet Marketing by Matt Bailey

Author:Matt Bailey
Language: eng
Format: mobi, epub
Tags: Web, Internet Marketing, Marketing, Computers, General, E-Commerce, Internet, Business & Economics
ISBN: 9780470633748
Publisher: John Wiley and Sons
Published: 2011-04-01T00:00:00+00:00

Different block areas can be designated by different colors. This wireframe uses combinations of black and gray for text areas, green as action items, and blue as linked content or images. The primary purpose at this stage is the layout and size of the page elements and developing clear relationships between the elements in order to ensure that the message and purpose of the page is clear and that the calls to action are in place.

Iterations at this point consist of placement and size changes, and the beginnings of the labeling scheme can be developed at this point. Content is being developed behind the scenes, because the pages and structure have been defined, and the content can follow as the wireframes become more detailed.

Functional Layouts

Once the spatial relationships have been defined, the wireframes can move on to the final stages. Some prefer just to provide the layouts with specific function labels rather than put content in place, but the more clearly defined the wireframe, the more efficiently the development of the site will progress.

In this stage of wireframing, details are more developed. What follows is the development phase in which programmers implement function and artists apply graphics, color schemes, and layout. That isn’t to say that font sizes, color schemes, and white space can’t be defined in these stages; in fact, it may help the development as more detail work is applied and approved prior to the coding of the website.

If any special functions are necessary for navigational aids, visual cues, or other behaviors, these are noted in the functional layout specification. Scripts that will be necessary to expose text, tab-based navigation, or other functions on the page should be defined regarding how it will be developed and scripted and any specific language necessary for the function. By identifying these scripted tools on the website, any roadblocks to search crawlers or accessibility can be identified early and dealt with by change or adaptation.

A finished wireframe can provide enough detail that it can look and feel exactly like a website (see Figure 12-20). Many wireframes in the finished state can be easily coded into the live site, and the function and flow of the site can be witnessed and tested.

As mentioned, investing in this process saves both time and money. Defining layouts, functions, content paths, content arrangement, and flow are all handled in advance and can be agreed upon prior to developing a design and suffering through endless iterations. When goals are clearly defined and interpreted through the wireframes, the iteration process is limited because the business case has been made early, and all decisions are focused on the end result of conversions and profits.

Figure 12-20: Functional wireframe providing all necessary elements for the next stage of design

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.